<!--
 描述: 左上
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">党龄分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_gauge"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "gauge",
        data() {
            return {
                option: null,
                baseUrl: domain.testUrl,
                dataMap: {},
                baseName: ':name'
            }
        },
        created() {
            this.getEchart();
        },
        mounted() {
        },
        methods: {
            getEchart(param) {
                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');
                    this.baseName = param;
                }
                var url = this.baseUrl + "memberDatav/findMemberByPartyStanding?name=" + this.baseName;
                var data = [];
                var datalist = [];
                axios.post(url).then((response) => {
                    for (let i = 0; i < response.data.length; i++) {
                        datalist.push(response.data[i].x)
                        data.push(response.data[i].y)
                    }
                    let myChart = echarts.init(document.getElementById('chart_gauge'));
                    let itemStyle = {
                        barBorderRadius: [15, 0],
                        color: '#0084ff'
                    }
                    this.option = {
                        baseOption: {
                            timeline: {
                                axisType: 'category',
                                autoPlay: true,
                                playInterval: 1000,
                                left: -99,
                                right: 9999,
                                bottom: 0,
                                lineStyle: {
                                    color: '#14b0ff'
                                },
                                label: {
                                    color: '#fff'

                                },
                                checkpointStyle: {
                                    color: '#01d8ff',
                                    symbolSize: 10,
                                    borderColor: 'rgba(1, 216, 255, 0.5)',
                                    borderWidth: 5,

                                },
                                controlStyle: {
                                    show: false,

                                },
                                itemStyle: {
                                    borderColor: '#004b85',
                                    borderWidth: 1,
                                    shadowColor: 'rgba(1, 216, 225, 0.5)',
                                    shadowBlur: 5
                                },
                                emphasis: {
                                    label: {
                                        color: '#01d8ff',
                                        show: false
                                    },
                                    checkpointStyle: {
                                        color: '#01d8ff',
                                        borderColor: 'rgba(1, 216, 255, 0.5)',
                                        borderWidth: 5,
                                    },
                                    itemStyle: {
                                        color: '#01d8ff',
                                        borderColor: 'rgba(1, 216, 225, 0.5)',
                                        borderWidth: 5
                                    }
                                }
                            },
                            calculable: true,
                            grid: {
                                top: '10%',
                                bottom: '25%'
                            },
                            xAxis: [{
                                type: 'category',
                                axisLabel: {
                                    interval: 0
                                },
                                data: datalist,
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#2867a8',
                                    }
                                },
                            }],
                            yAxis: [{
                                type: 'value',
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#2867a8'
                                    }
                                }
                            }],
                            series: [{
                                type: 'bar',
                                barWidth: 15,
                                legendHoverLink: true,
                                label: {
                                    show: true,
                                    position: 'top',
                                    color: '#fff'
                                },
                            }]
                        },
                        options: [{
                            series: [{
                                data: data,
                                itemStyle: itemStyle
                            }]
                        }]
                    }
                    myChart.setOption(this.option, true);
                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });
                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }
        },
    };
</script>
<style lang="scss" scoped>
    .sn-container {
        left: 10px;
        top: 44px;
        width: 508px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>
